<template>
    <view>
        <view class="car-input-container">
            <view class="car-input-box" v-for="(item,index) in inputList" :key="index" @click="plateInput(index)">
                <view class="car-input-item" :class="[curInput == index?'sel-item':'',(maxNum-1) == index?'last-item':'']">
                    <view :class="curInput == index?'sel-item-line':''"></view>
                    <img :src="xnyImgBase64" class="new-item-img" v-if="(maxNum-1) == index" />
                    {{item}}
                </view>
            </view>
        </view>

        <view class="car-number-container" v-if="showKeyPop1">
            <view class="plate-close" @click="closeKeyboard"><text class="plate-close-btn">关闭</text></view>
            <view class="plate-popup-list">
                <view class="plate-popup-item province-item" v-for="(item,index) in keyProvince1" :key="index" @click="tapKeyboard(item)">{{item}}</view>
            </view>
            <view class="plate-popup-list">
                <view class="plate-popup-item province-item" v-for="(item,index) in keyProvince2" :key="index" @click="tapKeyboard(item)">{{item}}</view>
            </view>
            <view class="plate-popup-list">
                <view class="plate-popup-item province-item" v-for="(item,index) in keyProvince3" :key="index" @click="tapKeyboard(item)">{{item}}</view>
            </view>
            <view class="plate-popup-list">
                <view class="plate-popup-item province-item" v-for="(item,index) in keyProvince4" :key="index" @click="tapKeyboard(item)">{{item}}</view>
                <!-- 删除 -->
                <view class="plate-popup-item province-item del" @click="onPlateDelTap">
                    <image :src="deleteImgBase64" />
                </view>
            </view>
        </view>

        <view class="car-number-container" v-if="showKeyPop2">
            <view class="plate-close" @click="closeKeyboard"><text class="plate-close-btn">关闭</text></view>
            <view class="plate-popup-list">
                <view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''" v-for="(item,index) in keyEnInput1" :key="index" @click="tapKeyboard(item)">
                    {{item}}
                </view>
            </view>
            <view class="plate-popup-list">
                <view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''" v-for="(item,index) in keyEnInput2" :key="index" @click="tapKeyboard(item)">
                    {{item}}
                </view>
            </view>
            <view class="plate-popup-list">
                <view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''" v-for="(item,index) in keyEnInput3" :key="index" @click="tapKeyboard(item)">
                    {{item}}
                </view>
            </view>
            <view class="plate-popup-list">
                <view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''" v-for="(item,index) in keyEnInput4" :key="index" @click="tapKeyboard(item)">
                    {{item}}
                </view>
                <!-- 删除 -->
                <view class="plate-popup-item del" @click="onPlateDelTap">
                    <image :src="deleteImgBase64" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'car-number-input',
        emits: ['numberInputResult'],
        props: {
            defaultStr: {
                type: String,
                default: ''
            },
            plateNum: {
                type: String,
                default: ''
            },
            // maxNum: {
            // 	type: Number,
            // 	default: 8
            // },
        },
        data() {
            return {
                inputList: [" ", " ", " ", " ", " ", " ", " ", " "],
                curInput: -1,
                maxNum: 8,
                showKeyPop1: false,
                showKeyPop2: false,
                keyProvince1: ['京', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '沪'],
                keyProvince2: ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
                keyProvince3: ['粤', '桂', '琼', '渝', '川', '贵', '云', '藏'],
                keyProvince4: ['陕', '甘', '青', '宁', '新', 'W'],
                keyEnInput1: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
                keyEnInput2: ["Q", "W", "E", "R", "T", "Y", "U", "P", "学", "军"],
                keyEnInput3: ["A", "S", "D", "F", "G", "H", "J", "K", "L", "警"],
                keyEnInput4: ["Z", "X", "C", "V", "B", "N", "M", "港", "澳"],
                lockInput: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
                xnyImgBase64: "",
                deleteImgBase64: ""
            }
        },
        watch: {
            defaultStr(val) {
                if (val != "" && val != null) {
                    const valList = val.split("")
                    for (let i in valList) {
                        this.inputList[i] = valList[i]
                    }
                }
            },
            curInput(val) {
                this.showOrHidePop(val)

                this.keyEnInput2 = ["Q", "W", "E", "R", "T", "Y", "U", "O", "P", "军"]
                switch (val) {
                    case 1:
                        this.lockInput = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "学", "军", "警", "港", "澳"]
                        break
                    case 2:
                        this.lockInput = ["O", "学", "军", "警", "港", "澳"]
                        break
                    case 3:
                        this.lockInput = ["O", "学", "军", "警", "港", "澳"]
                        break
                    case 4:
                        this.lockInput = ["O", "学", "军", "警", "港", "澳"]
                        break
                    case 5:
                        this.lockInput = ["O", "学", "军", "警", "港", "澳"]
                        break
                    case 6:
                        this.lockInput = ["O"]
                        this.keyEnInput2 = ["Q", "W", "E", "R", "T", "Y", "U", "P", "学", "军"]
                        break
                    case 7:
                        this.lockInput = ["O", "学", "军", "警", "港", "澳"]
                        break
                    default:
                        this.lockInput = []
                        break
                }
            }
        },
        created() {
            if (this.defaultStr != "" && this.defaultStr != null) {
                const valList = this.defaultStr.split("")
                for (let i in valList) {
                    this.inputList[i] = valList[i]
                }
            }
        },
        methods: {
            plateInput(e) {
                this.curInput = e
                this.showOrHidePop(e)
            },
            showOrHidePop(val) {
                if (val == -1) {
                    this.showKeyPop1 = false
                    this.showKeyPop2 = false
                } else if (val == 0) {
                    this.showKeyPop1 = true
                    this.showKeyPop2 = false
                } else {
                    this.showKeyPop1 = false
                    this.showKeyPop2 = true
                }

            },
            tapKeyboard(e) {
                if (this.lockInput.includes(e)) {
                    return
                }

                this.inputList[this.curInput] = e
                if (this.curInput < this.maxNum - 2) {
                    this.curInput++
                } else {
                    this.curInput = -1
                }

                this.emitResult()
            },
            closeKeyboard() {
                this.curInput = -1
            },
            onPlateDelTap() {
                if (this.inputList[this.curInput] == " ") {
                    this.curInput--
                }
                this.inputList[this.curInput] = " "

                this.emitResult()
            },
            emitResult() {
                const returnResult = this.inputList.join("")
                this.$emit('numberInputResult', returnResult);
            }
        }
    };
</script>

<style scoped lang="scss">
    .car-input-container {
        position: relative;
        padding: 0 5px;
        height: 44px;

        .car-input-box {
            display: inline-block;
            width: 12.5%;
            height: 44px;
            vertical-align: middle;

            .car-input-item {
                position: relative;
                border: 1px solid #E2E2E2;
                height: 40px;
                line-height: 40px;
                width: 80%;
                margin-left: 10%;
                text-align: center;
                font-size: 17px;

                .sel-item-line {
                    position: absolute;
                    bottom: 3px;
                    left: 15%;
                    height: 2px;
                    background-color: #2979ff;
                    width: 70%;
                }

                .new-item-img {
                    position: absolute;
                    top: -6px;
                    left: 50%;
                    margin-left: -15px;
                    height: 13px;
                    width: 30px;
                    z-index: 9;
                }
            }

            .sel-item {
                color: #2979ff;
            }

            .last-item {
                border: 1px solid #18bc37;
            }
        }
    }

    .car-number-container {
        position: fixed;
        z-index: 9999999;
        bottom: 100rpx;
        left: 0;
        width: 100%;
        height: 254px;
        background-color: #E3E2E7;
        -webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
        overflow: hidden;
        text-align: center;

        .plate-close {
            height: 40px;
            line-height: 40px;
            text-align: right;
            background-color: #FFF;

            .plate-close-btn {
                font-size: 13.5px;
                color: #555;
                margin-right: 15px;
            }
        }

        //键盘主体内容-单行
        .plate-popup-list {
            margin: 0 auto;
            overflow: hidden;
            display: inline-block;
            display: table;

            &:last-child {
                margin-bottom: 2px;
            }
        }

        //键盘主体内容-单个
        .plate-popup-item {
            float: left;
            font-size: 16px;
            width: 8vw;
            margin: 0 1vw;
            margin-top: 8px;
            height: 40px;
            line-height: 40px;
            background: #FFFFFF;
            border-radius: 5px;
            color: #4A4A4A;

            image {
                width: 16px;
                height: 16px;
                margin: 12px auto;
            }
        }

        .plate-popup-item:active {
            background-color: #EAEAEA;
        }

        .province-item {
            width: 8.8vw;
        }

        .lock-item {
            color: #AAA;
        }
    }
</style>